<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- em 表示内容中重要的点，样式渲染为 斜体-->
    <p>
        今天天气<em>真好</em>
    </p>
    <!-- strong  表示内容中的重要性，样式渲染为 加粗-->
    <p>
        <strong>
            如有雷同，不胜荣幸
        </strong>
    </p>
    <!-- i  样式渲染为斜体，没有语气表示
             b 样式渲染为加粗，没有语气表示
        -->
    <p>
        <i>这是一个 i 便签</i>
    </p>
    <p>
        <b>这是一个 b 标签</b>
    </p>
    <!--
        引用: 
           q：短引用，大多用在引用名言之类，在名言前后自动补足 ""，（补足样式 为:before ：after 不可选中） 
           blockquote:长引用，引用较长内容，引用的内容会另起一行，并首行空之前文字长度的字符，是块元素，不可用 p标签包裹 
           cite ：书名修饰，样式为斜体，行元素
    -->
    <p>
        子曰:
        <q>
            吾日三省吾身
        </q>
    </p>
    子曰:
    <blockquote>
        中午不睡，下午瞌睡
    </blockquote>
    <p>
        <cite>《论语》</cite>是最喜欢的一本书
    </p>
    <!--
         pre 文字内容的预处理，浏览器不会编译其中的内容，会保持格式输出
    -->
    <pre>
            window.onload = function(){
                consoe.log(6666);
            }
    </pre>
    <!-- 
        small 会自动比父元素的字体大小小一号
    -->
    <p>
        这是一个 p 中的文字<small>这是 p中的small</small>
    </p>
    <!--
       sup : 修饰的内容缩小，向上飘，诸如 平方，次方，标注，商标等等
       sub : 修饰的内容缩小，向下沉，诸如 化学式等等
    -->
    <p>
        赵薇 <sup> [1]</sup>
        赵薇 <sup><a href="">[1]</a> </sup>
    </p>
    <p>
        H<sub>2</sub>O
    </p>
    <!--
        del : 标签修饰内容中间会有一条横线，
        ins ：标签修饰内容会有一条下划线，表示插入的内容
    -->
    <p>
        <del>这是要删除的内容</del>
        今天天气<ins>好</ins>啊
    </p>
</body>

</html>